import React from 'react';
import { Card, Typography } from 'antd';
import { 
  ScanOutlined, 
  FileWordOutlined,
  FilePdfOutlined,
  SwapOutlined,
  MergeCellsOutlined,
  ScissorOutlined
} from '@ant-design/icons';
import { useNavigate } from 'react-router-dom';
import styles from './HomePage.module.css';

const { Title } = Typography;

const HomePage: React.FC = () => {
  const navigate = useNavigate();

  const features = [
    {
      title: 'PDF转Word',
      icon: <FileWordOutlined />,
      description: '将PDF文档转换为可编辑的Word格式',
      path: '/pdf-to-word',
      color: '#4285f4'
    },
    {
      title: 'PDF转PPT',
      icon: <SwapOutlined />,
      description: '将PDF文档转换为PowerPoint演示文稿',
      path: '/pdf-to-ppt',
      color: '#ea4335'
    },
    {
      title: '图片转PDF',
      icon: <FilePdfOutlined />,
      description: '将多张图片合并转换为PDF文档',
      path: '/images-to-pdf',
      color: '#34a853'
    },
    {
      title: 'OCR文字识别',
      icon: <ScanOutlined />,
      description: '从图片或PDF中提取文字内容',
      path: '/ocr',
      color: '#fbbc05'
    },
    {
      title: '合并PDF',
      icon: <MergeCellsOutlined />,
      description: '将多个PDF文件合并为一个文档',
      path: '/merge-pdf',
      color: '#1890ff'
    },
    {
      title: '分割PDF',
      icon: <ScissorOutlined />,
      description: '将PDF文档拆分为多个文件',
      path: '/split-pdf',
      color: '#722ed1'
    }
  ];

  return (
    <div className={styles.container}>
      <Title level={2} className={styles.pageTitle}>
        PDF工具箱
      </Title>
      <div className={styles.featureGrid}>
        {features.map((feature, index) => (
          <Card
            key={index}
            hoverable 
            className={styles.featureCard}
            onClick={() => navigate(feature.path)}
          >
            <div className={styles.cardContent}>
              <div 
                className={styles.iconWrapper} 
                style={{ backgroundColor: feature.color }}
              >
                {feature.icon}
              </div>
              <div className={styles.textContent}>
                <h3>{feature.title}</h3>
                <p>{feature.description}</p>
              </div>
            </div>
          </Card>
        ))}
      </div>
    </div>
  );
};

export default HomePage; 